<template>
  <div>
    <el-container style="height: 100%; border: 1px solid #eee">
      <el-aside width="200px">
        <el-tree :data="carList" node-key="value" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </el-aside>
      <el-container>
        <el-main>
          <TopFilter ref="from" :list="topFilterList" :cols="3" @filterChange="changeHandle" @resetChange="resetHandle"></TopFilter>

          <FilterTable
            ref="table"
            :pageSize="10"
            :pageSizesArray="[5, 10, 20, 30, 50]"
            :height="'auto'"
            :columns="columns"
            :fetchapi="fetchApi"
            :params="fetchParams"
            :datakey="'records'"
            :onRowSelectChange="selectChangeHandle"
            :onColumnsChange="(columns) => (this.columns = columns)"
          >
          </FilterTable>
          <div
            :style="{
              position: 'absolute',
              left: 0,
              bottom: 0,
              right: 0,
              zIndex: 9,
              borderTop: '1px solid #e9e9e9',
              padding: '10px 20px',
              background: '#fff',
              textAlign: 'right',
            }"
          >
            <el-button @click="closeDrawer(1)">取 消</el-button>
            <el-button @click="closeDrawer(2)" type="primary" :disabled="isDisabled">确 定</el-button>
          </div>

          <!--          <FormPanel ref="from" :list="formList" :data="dealerInfo" @formChange="changeHandle" :isSubmitBtn="false" :collapse="false" :labelWidth="190"></FormPanel>-->
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import moment from 'moment';
import { queryCarListSideC, getProductBrandTree, listColor, queryAllOption, queryAllPackage, queryDealerAddress } from '@/api/dealerSale/salesPlan/MonthPlanReport';
import { getAllDiscount } from '@/api/dealerSale/OrderManagement/OrderSubmissionC';
import { queryList } from '@/api/omSale/salesPlan/MonthTargetQuery';
import { dictionary } from '@/utils/dictMixin';
import Cookies from 'js-cookie';
export default {
  props: ['isClientOrder'],
  data() {
    return {
      // formList: this.createdFromList(),
      topFilterList: this.createdFrom(),
      columns: this.createdTable(),
      fetchApi: queryCarListSideC,
      fetchParams: { brandId: null, seriesId: null, modelId: null },
      saveData: [],
      isDisabled: true,
      carList: [],
      defaultProps: {
        children: 'child',
        label: 'label',
      },
      dealerInfo: {},
      addressDTO: [],
      accountTypeList: [],
      dealerCode: Cookies.get('ownerCode'),
      dealerProductInfo: [],
    };
  },
  mixins: [dictionary],
  created() {
    this.getvehicleList();
    this.getListColor();
    this.getAllOption();
    this.getAllPackage();
    this.getDealerInfo();
    this.QueryDealerProductInfo();
    console.log(this.isClientOrder, '=======================');
  },
  methods: {
    resetHandle() {
      this.fetchParams.brandId = null;
      this.fetchParams.seriesId = null;
      this.fetchParams.modelId = null;
      this.fetchParams = Object.assign({}, this.fetchParams);
    },
    initCityLink(value) {
      this.formList[4].initialValue = '';
      this.formList[5].initialValue = '';
      this.formList[6].initialValue = '';
      for (let i in this.addressDTO) {
        if (this.addressDTO[i].addressId === value) {
          this.formList[4].initialValue = this.addressDTO[i].cityId;
          this.formList[5].initialValue = this.addressDTO[i].linkMan;
          this.formList[6].initialValue = this.addressDTO[i].linkPhone;
          return;
        }
      }
    },
    handleNodeClick(val) {
      console.log('value================>' + val.type, val.value);
      if (val.type === 1) {
        //品牌
        this.fetchParams = Object.assign({}, this.fetchParams);
        this.fetchParams.brandId = Number(val.value);
        this.fetchParams.seriesId = null;
        this.fetchParams.modelId = null;
      } else if (val.type === 2) {
        //车系
        this.fetchParams = Object.assign({}, this.fetchParams);
        this.fetchParams.brandId = null;
        this.fetchParams.seriesId = Number(val.value);
        this.fetchParams.modelId = null;
      } else if (val.type === 3) {
        //车型
        this.fetchParams = Object.assign({}, this.fetchParams);
        this.fetchParams.brandId = null;
        this.fetchParams.seriesId = null;
        this.fetchParams.modelId = Number(val.value);
      }
      this.$refs.from.SUBMIT_FORM();
    },
    async getDealerInfo() {
      const res = await queryDealerAddress();
      if (res.resultCode === 200) {
        this.addressDTO = res.data.addressDTOS;
        this.accountTypeList = res.data.accountTypes;
      }
    },
    async getAllOption() {
      const res = await queryAllOption();
      if (res.resultCode === 200) {
        res.data.map((x) => {
          this.topFilterList.find((item) => item.fieldName === 'optionId').itemList.push({ text: x.optionName, value: x.optionId });
        });
      }
    },
    async getAllPackage() {
      const res = await queryAllPackage();
      if (res.resultCode === 200) {
        res.data.map((x) => {
          this.topFilterList.find((item) => item.fieldName === 'configId').itemList.push({ text: x.configName, value: x.packageId });
        });
      }
    },
    async getListColor() {
      const res = await listColor();
      if (res.resultCode === 200) {
        let a = res.data;
        a.map((x) => {
          this.topFilterList.find((item) => item.fieldName === 'trimColorId').itemList.push({ text: x.colorName, value: x.colorId });
        });
        this.topFilterList[4].itemList = this.topFilterList.find((item) => item.fieldName === 'trimColorId').itemList;
      }
    },
    async getvehicleList() {
      let res = await getProductBrandTree();
      this.carList = res.data;
    },
    //查询该经销商导入的物料
    async QueryDealerProductInfo() {
      const res = await queryList({ isDealer: 10041001, targetDate: moment().format('YYYY-MM'), size: 9999 });
      if (res.resultCode === 200) {
        this.dealerProductInfo = res.data.records;
      }
    },
    changeHandle(val) {
      this.fetchParams = Object.assign({}, this.fetchParams, val);
    },
    closeDrawer(type) {
      if (1 == type) {
        this.$emit('close', false);
        return;
      }

      // let josn= this.$refs.from.SUBMIT_FORM();
      // const res = await getAllDiscount(this.saveData);
      for (let i in this.saveData) {
        this.saveData[i].targetType = null;
        for (let j in this.dealerProductInfo) {
          if (this.saveData[i].seriesId === this.dealerProductInfo[j].seriesId && this.dealerProductInfo[j].productCode == null) {
            if (this.saveData[i].targetType == 24031002) continue;
            this.saveData[i].targetType = this.dealerProductInfo[j].targetType;
            this.saveData[i].targetNum = this.dealerProductInfo[j].targetNum;
          } else if (this.saveData[i].productCode === this.dealerProductInfo[j].productCode) {
            this.saveData[i].targetType = this.dealerProductInfo[j].targetType;
            this.saveData[i].targetNum = this.dealerProductInfo[j].targetNum;
          }
        }
        this.saveData[i].accountTypes = this.accountTypeList;
        this.saveData[i].accountId = this.accountTypeList[0].accountId;
        if (this.isClientOrder) {
          this.saveData[i].vehicleUserList = this.createDictList('2406').slice(0, 1);
        } else {
          this.saveData[i].vehicleUserList = this.createDictList('2406').slice(1);
        }
        this.saveData[i].vehicleUse = this.saveData[i].vehicleUserList[0].value;
        this.saveData[i].isRebate = 10041001;
      }
      // this.$refs.from.RESET_FORM();
      this.$emit('close', false, this.saveData);
    },
    selectChangeHandle(rows) {
      if (rows.length > 0) {
        this.saveData = rows;
        this.isDisabled = false;
        return;
      }
      this.isDisabled = true;
    },

    createdFrom() {
      return [
        {
          type: 'INPUT',
          label: '物料编码',
          fieldName: 'productCode',
          placeholder: '请输入',
        },
        {
          type: 'SELECT',
          label: '配置',
          fieldName: 'configId',
          placeholder: '请选择',
          itemList: [],
        },
        {
          type: 'SELECT',
          label: '选装',
          fieldName: 'optionId',
          placeholder: '请选择',
          itemList: [],
        },
        {
          type: 'SELECT',
          label: '内饰',
          fieldName: 'trimColorId',
          placeholder: '请选择',
          itemList: [],
        },
        {
          type: 'SELECT',
          label: '外饰',
          fieldName: 'colorId',
          placeholder: '请选择',
          itemList: [],
        },
      ];
    },
    createdTable() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: (props) => {
            return <span>{props.row.index + 1}</span>;
          },
        },
        {
          title: '物料编码',
          dataIndex: 'productCode',
          width: 200,
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '物料描述',
          dataIndex: 'productName',
          width: 400,
          sorter: true,
          filter: true,
          filterType: 'input',
        },

        {
          title: '车型',
          dataIndex: 'modelName',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '车系',
          dataIndex: 'seriesName',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '配置',
          dataIndex: 'configName',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '选装',
          dataIndex: 'optionName',
          align: 'center',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '内饰',
          dataIndex: 'trimColor',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '外饰',
          dataIndex: 'colorName',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
      ];
    },
  },
};
</script>
